<%@ page language="java" contentType="text/html; charset=utf8"
    pageEncoding="utf8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.easytopit.demo.domain.Movie"%>
<%@ page import="java.util.List"%>
<!DOCTYPE html>
<html>
<head>
	<!-- Basic Page Needs -->
        <meta charset="utf-8">
        <title>电影列表</title>
        <meta name="description" content="A Template by Gozha.net">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Gozha.net">
    
    <!-- Mobile Specific Metas-->
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="telephone=no" name="format-detection">
    
    <!-- Fonts -->
        <!-- Font awesome - icon font -->
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <!-- Roboto -->
        <link href='http://fonts.useso.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    
    <!-- Stylesheets -->
        <!-- jQuery UI -->
        <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">

        <!-- Mobile menu -->
        <link href="css/gozha-nav.css" rel="stylesheet" />
        <!-- Select -->
        <link href="css/external/jquery.selectbox.css" rel="stylesheet" />
    
        <!-- Custom -->
        <link href="css/style.css?v=1" rel="stylesheet" />

        <!-- Modernizr --> 
        <script src="js/external/modernizr.custom.js"></script>
</head>

<body> 
    <div class="wrapper">
        <!-- Header section -->
        <header class="header-wrapper">
            <div class="container">
                <!-- Logo link-->
                <a href='index.html' class="logo">
                    <img alt='logo' src="images/logo.png">
                </a>
                
                <!-- Main website navigation-->
                <nav id="navigation-box">
                    <!-- Toggle for mobile menu mode -->
                    <a href="#" id="navigation-toggle">
                        <span class="menu-icon">
                            <span class="icon-toggle" role="button" aria-label="Toggle Navigation">
                              <span class="lines"></span>
                            </span>
                        </span>
                    </a>
                </nav>
                
                <div class="control-panel">
                    <a href="/" class="btn btn-md btn--warning btn--book">主页</a>
                </div>

            </div>
        </header>
        
        <!-- Search bar -->
        <div class="search-wrapper">
            <div class="container container--add">
                <form action="" id='search-form' method='get' class="search">
                    <input type="text" name="name" class="search__field" placeholder="搜索">
                    <select name="sorting_item" id="search-sort" class="search__sort" tabindex="0">
                        <option value='this.form.action="/queryMovieByName.do"' selected='selected'>搜索片名</option>
                        <option value='this.form.action="/queryMovieByType.do"'>搜索类型</option>
                        <option value='this.form.action="/queryMovieByCountry.do"'>搜索国家</option>
                        <option value='this.form.action="/queryMovieByDirector.do"'>搜索导演</option>
                        <option value='this.form.action="/queryMovieByActor.do"'>搜索演员</option>
                    </select>
                    <button type='submit' class="btn btn-md btn--danger search__button">搜索</button>
                </form>
            </div>
        </div>
        
        <!-- Main content -->
        <section class="container">
            <div class="col-sm-8 col-md-9">
                <h2 class="page-heading">电影列表</h2>
                
                <div class="select-area">
                    
                    <div class="datepicker">
                      <span class="datepicker__marker"><i class="fa fa-calendar"></i>Date</span>
                      <input type="text" id="datepicker" value='2017/8/25' class="datepicker__input">
                    </div>

                </div>

				<c:forEach var="movie" items="${movies}">
                <!-- Movie preview item -->
                <div class="movie movie--preview popularity">
                    <div class="col-sm-5 col-md-3">
                       <div class="movie__images">
                           <img alt='' src="/upload/${movie.cover}" height="295px" width="185px">
                       </div>
                       <div class="movie__feature">
                           <a href="#" class="movie__feature-item movie__feature--comment"></a>
                           <a href="#" class="movie__feature-item movie__feature--photo"></a>
                       </div>
                    </div>

                    <div class="col-sm-7 col-md-9">
                        <a href="/queryMovieByName.do?name=${movie.name}" class="movie__title link--huge">${movie.name}</a>

                        <p class="movie__time">${movie.length}</p>

                        <p class="movie__option"><strong>国家: </strong><a href="/queryMovieByCountry.do?country=${movie.country}">${movie.country}</a></p>
                        <p class="movie__option"><strong>类型: </strong>
                        <%
							List<String> types = (List<String>)request.getAttribute("types");
							for(int i = 0; i < types.size(); i++){
						%>
							<%=types.get(i) %>
						<%}%>
                        </p>
                        <p class="movie__option"><strong>上映时间: </strong>${movie.onTime}</p>
                        <p class="movie__option"><strong>导演: </strong><a href="/queryMovieByDirector.do?director=${movie.director}">${movie.director}</a></p>
                        <p class="movie__option"><strong>演员: </strong>
                        <%
							List<String> actors = (List<String>)request.getAttribute("actors");
							for(int i = 0; i < actors.size(); i++){
						%>
							<%=actors.get(i) %>
						<%}%>
						</p>
						<p class="movie__option"><strong>片长: </strong><a href="#">${movie.length}</a></p>
                        <div class="movie__btns">
                            <a href="/selectMovie" class="btn btn-md btn--warning">购<span class="hidden-sm">票</span></a>
                            <a href="#" class="watchlist">加入购物车</a>
                        </div>

                        <div class="preview-footer">
                        	<%
								List<Integer> countComment = (List<Integer>)request.getAttribute("countComment");
								for(int i = 0; i < countComment.size(); i++){
							%>
                            <div class="movie__rate"><div class="score"></div>
	                            <span class="movie__rate-number">
	                            	<%=countComment.get(i) %>条影评
	                            </span>
                            <span class="movie__rating"></span></div>
                            <%}%>
                            <a href="#" class="movie__show-btn">查看场次</a>
                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="time-select">
                        <div class="time-select__group group--first">
                            <div class="col-sm-4">
                                <p class="time-select__place">上午</p>
                            </div>
                            <ul class="col-sm-8 items-wrap">
                                <li class="time-select__item" data-time='08:45'>08:45</li>
                            	<li class="time-select__item" data-time='09:40'>09:40</li>
                            </ul>
                        </div>

                        <div class="time-select__group">
                            <div class="col-sm-4">
                                <p class="time-select__place">下午</p>
                            </div>
                            <ul class="col-sm-8 items-wrap">
                                <li class="time-select__item" data-time='14:30'>14:30</li>
	                        	<li class="time-select__item" data-time='15:00'>15:00</li>
	                            <li class="time-select__item" data-time='15:50'>15:50</li>
	                            <li class="time-select__item" data-time='16:40'>16:40</li>
	                            <li class="time-select__item" data-time='17:40'>17:40</li>
                            </ul>
                        </div>

                        <div class="time-select__group">
                            <div class="col-sm-4">
                                <p class="time-select__place">晚上</p>
                            </div>
                            <ul class="col-sm-8 items-wrap">
                                <li class="time-select__item" data-time='18:10'>18:10</li>
	                            <li class="time-select__item" data-time='19:00'>19:00</li>
	                            <li class="time-select__item" data-time='19:30'>19:30</li>
	                            <li class="time-select__item" data-time='20:00'>20:00</li>
	                            <li class="time-select__item" data-time='20:30'>20:30</li>
	                            <li class="time-select__item" data-time='21:20'>21:20</li>
	                            <li class="time-select__item" data-time='21:00'>22:20</li>
	                            <li class="time-select__item" data-time='22:50'>22:50</li>
	                            <li class="time-select__item" data-time='23:40'>23:40</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- end movie preview item -->
                </c:forEach>
                
                <!-- end movie preview item -->
                <div class="coloum-wrapper">
                    <div class="pagination paginatioon--full">
                            <a href='#' class="pagination__prev">上一页</a>
                            <a href='#' class="pagination__next">下一页</a>
                    </div>
                </div>

            </div>
                    
            <aside class="col-sm-4 col-md-3">
                <div class="sitebar">
                    <div class="banner-wrap">
                        <img alt='' src="images/dhxy.png" height="350px" width="250px">
                    </div>

                     <div class="banner-wrap">
                        <img alt='' src="images/ssss.png" height="350px" width="250px">
                    </div>

                     <div class="banner-wrap banner-wrap--last">
                        <img alt='' src="images/hsy.png" height="350px" width="250px">
                    </div>

                    <div class="promo marginb-sm">
                      <div class="promo__head">Interesting.Movie app</div>
                      <div class="promo__describe">for all smartphones<br> and tablets</div>
                      <div class="promo__content">
                          <ul>
                              <li class="store-variant"><a href="#"><img alt='' src="images/apple-store.svg"></a></li>
                              <li class="store-variant"><a href="#"><img alt='' src="images/google-play.svg"></a></li>
                              <li class="store-variant"><a href="#"><img alt='' src="images/windows-store.svg"></a></li>
                          </ul>
                      </div>
                  </div>

                    <div class="category category--discuss category--count marginb-sm mobile-category ls-cat">
                        <h3 class="category__title">the Most <br><span class="title-edition">discussed posts</span></h3>
                        <ol>
                            <li><a href="#" class="category__item">Gravity</a></li>
                            <li><a href="#" class="category__item">The Counselor</a></li>
                            <li><a href="#" class="category__item">Bad Grandpa</a></li>
                            <li><a href="#" class="category__item">Blue Is the Warmest Color</a></li>
                            <li><a href="#" class="category__item">Rush</a></li>
                            <li><a href="#" class="category__item">Captain Phillips</a></li>
                            <li><a href="#" class="category__item">Escape Plan</a></li>
                            <li><a href="#" class="category__item">Cloudy with a Chance of Meatballs 2</a></li>
                            <li><a href="#" class="category__item">Prisoners</a></li>
                            <li><a href="#" class="category__item">The Fifth Estate</a></li>
                        </ol>
                    </div>

                    <div class="category category--cooming category--count marginb-sm mobile-category rs-cat">
                        <h3 class="category__title">coming soon<br><span class="title-edition">movies</span></h3>
                        <ol>
                            <li><a href="#" class="category__item">Ender's Game</a></li>
                            <li><a href="#" class="category__item">About Time</a></li>
                            <li><a href="#" class="category__item">Last Vegas</a></li>
                            <li><a href="#" class="category__item">Free Birds</a></li>
                            <li><a href="#" class="category__item">The Wolf of Wall Street</a></li>
                            <li><a href="#" class="category__item">The Best Man Holiday</a></li>
                            <li><a href="#" class="category__item">The Book Thief</a></li>
                            <li><a href="#" class="category__item">The Hunger Games: Catching Fire</a></li>
                            <li><a href="#" class="category__item">Delivery Man</a></li>
                            <li><a href="#" class="category__item">Nebraska</a></li>
                        </ol>
                    </div>
                </div>
            </aside>

        </section>
        
        <div class="clearfix"></div>

        <footer class="footer-wrapper">
            <section class="container">
                <div class="col-xs-4 col-md-2 footer-nav">
                    <ul class="nav-link">
                        <li><a href="#" class="nav-link__item">Cities</a></li>
                        <li><a href="movie-list-left.html" class="nav-link__item">Movies</a></li>
                        <li><a href="trailer.html" class="nav-link__item">Trailers</a></li>
                        <li><a href="rates-left.html" class="nav-link__item">Rates</a></li>
                    </ul>
                </div>
                <div class="col-xs-4 col-md-2 footer-nav">
                    <ul class="nav-link">
                        <li><a href="coming-soon.html" class="nav-link__item">Coming soon</a></li>
                        <li><a href="cinema-list.html" class="nav-link__item">Cinemas</a></li>
                        <li><a href="offers.html" class="nav-link__item">Best offers</a></li>
                        <li><a href="news-left.html" class="nav-link__item">News</a></li>
                    </ul>
                </div>
                <div class="col-xs-4 col-md-2 footer-nav">
                    <ul class="nav-link">
                        <li><a href="#" class="nav-link__item">Terms of use</a></li>
                        <li><a href="gallery-four.html" class="nav-link__item">Gallery</a></li>
                        <li><a href="contact.html" class="nav-link__item">Contacts</a></li>
                        <li><a href="page-elements.html" class="nav-link__item">Shortcodes</a></li>
                    </ul>
                </div>
                <div class="col-xs-12 col-md-6">
                    <div class="footer-info">
                        <p class="heading-special--small">A.Movie<br><span class="title-edition">in the social media</span></p>

                        <div class="social">
                            <a href='#' class="social__variant fa fa-facebook"></a>
                            <a href='#' class="social__variant fa fa-twitter"></a>
                            <a href='#' class="social__variant fa fa-vk"></a>
                            <a href='#' class="social__variant fa fa-instagram"></a>
                            <a href='#' class="social__variant fa fa-tumblr"></a>
                            <a href='#' class="social__variant fa fa-pinterest"></a>
                        </div>
                        
                        <div class="clearfix"></div>
                        <p class="copy">&copy; A.Movie, 2013. All rights reserved. Done by Olia Gozha</p>
                    </div>
                </div>
            </section>
        </footer>
    </div>

    <!-- open/close -->
        <div class="overlay overlay-hugeinc">
            
            <section class="container">

                <div class="col-sm-4 col-sm-offset-4">
                    <button type="button" class="overlay-close">Close</button>
                    <form id="login-form" class="login" method='get' novalidate=''>
                        <p class="login__title">sign in <br><span class="login-edition">welcome to A.Movie</span></p>

                        <div class="social social--colored">
                                <a href='#' class="social__variant fa fa-facebook"></a>
                                <a href='#' class="social__variant fa fa-twitter"></a>
                                <a href='#' class="social__variant fa fa-tumblr"></a>
                        </div>

                        <p class="login__tracker">or</p>
                        
                        <div class="field-wrap">
                        <input type='email' placeholder='Email' name='user-email' class="login__input">
                        <input type='password' placeholder='Password' name='user-password' class="login__input">

                        <input type='checkbox' id='#informed' class='login__check styled'>
                        <label for='#informed' class='login__check-info'>remember me</label>
                         </div>
                        
                        <div class="login__control">
                            <button type='submit' class="btn btn-md btn--warning btn--wider">sign in</button>
                            <a href="#" class="login__tracker form__tracker">Forgot password?</a>
                        </div>
                    </form>
                </div>

            </section>
        </div>

	<!-- JavaScript-->
        <!-- jQuery 1.9.1--> 
        <script src="http://ajax.useso.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/external/jquery-1.10.1.min.js"><\/script>')</script>
        <!-- Migrate --> 
        <script src="js/external/jquery-migrate-1.2.1.min.js"></script>
        <!-- jQuery UI -->
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <!-- Bootstrap 3--> 
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

        <!-- Mobile menu -->
        <script src="js/jquery.mobile.menu.js"></script>
         <!-- Select -->
        <script src="js/external/jquery.selectbox-0.2.min.js"></script> 

        <!-- Stars rate -->
        <script src="js/external/jquery.raty.js"></script>

        <!-- Form element -->
        <script src="js/external/form-element.js"></script>
        <!-- Form validation -->
        <script src="js/form.js"></script>

        <!-- Custom -->
        <script src="js/custom.js"></script>
		
		<script type="text/javascript">
            $(document).ready(function() {
                init_MovieList();
            });
		</script>

</body>
</html>